<template>
    <view class="tr">
        <br>
        <view class="topedit">
			<!-- <view @click="cancelBuyNum">
				<button v-if="currentBuyStopLossNum >= buyStopLossLimit" style="background-color: #8f0000;color: #ffffff;">多</button>
				<button v-if="currentBuyStopLossNum < buyStopLossLimit" style="background-color: #007300;color: #ffffff;">多</button>
			</view>
			<view @click="cancelSellNum" style="margin-left: 5px;margin-right: 5px;">
				<button v-if="currentSellStopLossNum >= sellStopLossLimit" style="background-color: #8f0000;color: #ffffff;">空</button>
				<button v-if="currentSellStopLossNum < sellStopLossLimit" style="background-color: #007300;color: #ffffff;">空</button>
			</view> -->
            <view class="twosearch">
				<SelectBox @selectbox="selectbox" :select="select"></SelectBox>
                <image src="../../static/img/sec.png"></image>
				<input confirm-type="search" @confirm="onInput" placeholder-style="color:#ADB0BB" type="text" placeholder="搜索你关心的币种" />
            </view>
        </view>
        <view class="showyue">
            <view class="lyd">当前交易所可用USDT:</view>
			<text class="lnum" style="color:#666666">{{zyue}}</text>
        </view>
		<view class="showyue">
		    <view class="lyd">今日浮动盈亏USDT:</view>
			<view>
				<text v-if="todayFloatProfit>0" class="lnum" style="color:#05BC97">{{todayFloatProfit}}</text>
				<text v-if="todayFloatProfit==0" class="lnum" style="color:#666666">{{todayFloatProfit}}</text>
				<text v-if="todayFloatProfit<0" class="lnum" style="color:#D63E5D">{{todayFloatProfit}}</text>
			</view>
		</view>
		<view class="showyue">
		    <view class="lyd">总计浮动盈亏USDT:</view>
			<view>
				<text v-if="totalFloatProfit>0" class="lnum" style="color:#05BC97">{{totalFloatProfit}}</text>
				<text v-if="totalFloatProfit==0" class="lnum" style="color:#666666">{{totalFloatProfit}}</text>
				<text v-if="totalFloatProfit<0" class="lnum" style="color:#D63E5D">{{totalFloatProfit}}</text>
			</view>
		</view>
		<view class="showyue">
		    <view class="lyd">今日手续费USDT:</view>
			<text class="lnum" style="color:#666666">{{todayFee}}</text>
		</view>
		<view class="showyue">
		    <view class="lyd">总计手续费USDT:</view>
			<text class="lnum" style="color:#666666">{{totalFee}}</text>
		</view>
        <view style="background: #F5F5F5;width: 100%;height: 10px;"></view>
        <view class="tlsection">
            <view class="tavfal">
                <view class="tabdata" v-for="(item,index) in tabs" :key="item.vals" :id="item.vals" :data-index="index"
                    :class="active==index?'addcla':''" @click="tabFn">{{item.names}}({{item.numbe}}) </view>
            </view>
            <view v-for="(item,index) in checkboxData" :key="item.value" class="tlrow">
                <navigator
                    :url="'../transdetail/transdetail?exchangeType='+item.exchangeType+'&dest='+item.destinationCoin+'&sourc='+item.sourceCoin+'&amount='+item.amount+'&direction='+item.direction+'&leverRate='+item.leverRate"
                    hover-class="none">
                    <view class="atomusdt">
                        <view class="secondmodl">
                            <image :src="item.url"></image>
                            <text class="texa">{{item.destinationCoin}}/</text>
                            <text class="texb">{{item.sourceCoin}}</text>
                        </view>
						<view class="chcl">
							<text style="padding-top: 4px;">持仓:{{item.amount}}</text>
						</view>
						<!-- <view class="chcl">
							<text style="padding-top: 4px;">对冲仓:{{item.offSetAmount}}</text>
						</view> -->
                    </view>
					<view class="fords">
						<view class="thirths">
						    <view class="buy" v-if="item.direction=='buy'">
						        {{item.leverRate}}X·多
						    </view>
						    <view class="sell" v-if="item.direction=='sell'">
						        {{item.leverRate}}X·空
						    </view>
						</view>
					</view>
                    <view class="fords">
                        <view class="thirths">
                            <view class="thirleft" v-if="item.strategyType==0">
                                循环
                            </view>
                            <view class="thirleft" v-if="item.strategyType==1">
                                单次
                            </view>
							<!-- <view style="height: 100%;">
								<view class="thirright">
									加:
									<text>{{item.antiCoverTime}}</text>
								</view>
								<view class="thirright" style="margin-top: 10px;">
									补:
									<text>{{item.coverTime}}</text>
								</view>
							</view> -->
                        </view>
                        <view class="colnumLoss" v-if="item.floatProfit<0">
                            <text style="color:#D63E5D">浮盈{{item.floatProfit}}</text>
                        </view>
                        <view class="colnum" v-if="item.floatProfit==0">
                            <text>浮盈{{item.floatProfit}}</text>
                        </view>
                        <view class="colnumWin" v-if="item.floatProfit>0">
                        	<text style="color:#05BC97">浮盈{{item.floatProfit}}</text>
                        </view>
                    </view>
                    <view class="fords">
                    	<view class="fourth" v-if="item.rate<0" style="background-color: #D63E5D;">
                    		{{item.rate}}%
                    	</view>
                    	<view class="fourth" v-if="item.rate==0" style="background-color: #ADB0BB;">
                    	    {{item.rate}}%
                    	</view>
                    	<view class="fourth" v-if="item.rate>0" style="background-color: #05BC97;">
                    	    {{item.rate}}%
                    	</view>
                    </view>
					<image class="lock" src="/static/img/lock.png" v-show="item.lock"></image>
                </navigator>
            </view>
        </view>
		<wyb-modal
		 ref="modal" 
		 :title= nowTitle 
		 :content= nowContent
		 cancel-text="取消"
		 cancel-color="#A9A9A9"
		 :confirm-text= nowConfirmText
		 :confirm-color= nowConfirmTextColor
		 animation="slide-down"
		 @cancel="onCancelClick"
		 @confirm="onConfirmClick" />
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import {multiply} from "../../untils/math.js";
	import backTop from '../../components/back-top/back-top.vue';
	import SelectBox from '../../components/select-box/select-box.vue';
	import wybModal from '../../components/wyb-modal/wyb-modal.vue';
    export default {
		components: {
			backTop,
			SelectBox,
			wybModal
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
        data() {
            return {
				nowTitle: "",
				nowContent: "",
				nowConfirmText: "",
				nowConfirmTextColor: '',
				showConfirmToastText: '',
				xunhuan:[],
				danci:[],
				checkboxData: [],
				select: [{ name: "欧易",exchangeType: 0,imgSrc: "../../static/img/ind0.png"},{ name: "火币",exchangeType: 1,imgSrc: "../../static/img/ind2.png"}, { name: "币安",exchangeType: 2,imgSrc: "../../static/img/ind1.png"}],
				scrollTop: 0,
				backTop: {
					src: '../../static/top.png',
					scrollTop: 0
				},
                tabs: [{
                    vals: '-1',
                    names: '全部',
                    numbe: '0'
                }, {
                    vals: '0',
                    names: '策略循环中',
                    numbe: '0'
                }, {
                    vals: '1',
                    names: '单次策略中',
                    numbe: '0'
                }],
                active: 0,
                zyue: '0',
				todayFloatProfit: '0',
				totalFloatProfit: '0',
				todayFee: '0',
				totalFee: '0',
				currentBuyStopLossNum: 0,
				currentSellStopLossNum: 0,
				buyStopLossLimit: 1,
				sellStopLossLimit: 1,
				exchangeType: 2,
                tabvale: '-1',
                secaval:'',
				strategyType: -1
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
			uni.startPullDownRefresh();
        },
        onShow() {
            //uni.startPullDownRefresh();
        },
        onPullDownRefresh() {
            this.transAllList();
        },
        methods: {
			cancelBuyNum(){
				this.nowTitle= "多单警报";
				this.nowContent= "是否要清除多单总体止损次数？";
				this.nowConfirmText= "确定清除";
				this.nowConfirmTextColor= '#d68f00';
				this.showConfirmToastText ='清除多单总体止损次数成功!';
				this.$refs.modal.showModal();
			},
			cancelSellNum(){
				this.nowTitle= "空单警报";
				this.nowContent= "是否要清除空单总体止损次数？";
				this.nowConfirmText= "确定清除";
				this.nowConfirmTextColor= '#d68f00';
				this.showConfirmToastText ='清除空单总体止损次数成功!';
				this.$refs.modal.showModal();
			},
			selectbox(e){
			    this.exchangeType = e.exchangeType;
				uni.startPullDownRefresh();
			},
            //实时搜索
            onInput(e) {
                let secv = e.detail.value;
                this.secaval=secv;
                uni.startPullDownRefresh();
            },
            //tab切换
            tabFn(e) {
                //下标
                let inde = e.currentTarget.dataset.index || e.target.dataset.index;
                this.active = inde;
                //当前val
                let valid = e.currentTarget.id || e.target.id;
				this.strategyType = Number(valid);
                this.tabvale = Number(valid);
				uni.startPullDownRefresh();
            },
            //交易列表
            transAllList() {
                request.postAssets('/assets/quantOperate/getOpeningQuantBotList', {
                    userId: uinfo.userId, //用户账户ID
                    exchangeType: this.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
					strategyType: -1, //策略类型 0:循环 1:单次 -1:全部
                    coin: this.secaval //搜索条件
                }).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        this.zyue = res.data.balance;
						this.todayFloatProfit = res.data.todayFloatProfit;
						this.totalFloatProfit = res.data.totalFloatProfit;
						this.currentBuyStopLossNum = res.data.currentBuyStopLossNum;
						this.currentSellStopLossNum = res.data.currentSellStopLossNum;
						this.buyStopLossLimit = res.data.buyStopLossLimit;
						this.sellStopLossLimit = res.data.sellStopLossLimit;
						this.todayFee = res.data.todayFee;
						this.totalFee = res.data.totalFee;
                        let xunhuanNew = [];
                        let danciNew = [];
						
						function substr(str,num){
						    var s = str + "";
						    if(s.indexOf(".")!='-1'){
						        var str = s.substring(0,s.indexOf(".") + num);
						    }
						    return str
						}
						
                        res.data.list.map(item => {
                            if (item.strategyType == 0) {
                                xunhuanNew.push(item)
                            } else if(item.strategyType == 1){
                                danciNew.push(item)
                            }
							item.rate = substr(item.rate,5)
							item.floatProfit = substr(item.floatProfit,5)
                        })
						
						this.xunhuan = xunhuanNew;
						this.danci = danciNew;
                        
						if(this.tabvale == 0){
							this.checkboxData = this.xunhuan;
						}else if(this.tabvale == 1){
							this.checkboxData = this.danci;
						}else {
						    this.checkboxData = res.data.list;	
						}
                        //全部，循环，单次，各个的个数
                        this.tabs[0].numbe = res.data.list.length;
                        this.tabs[1].numbe = this.xunhuan.length;
                        this.tabs[2].numbe = this.danci.length;
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
			//设置止损次数
			setStopLossNum(stopLossNum,direction) {
			    request.postAssets('/assets/quantOperate/setStopLossNum', {
			        userId: uinfo.userId, //用户账户ID
			        exchangeType: this.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
					stopLossNum: stopLossNum, //设置的止损次数
			        direction:direction //多空方向
			    }).then(res => {
			        if (res.code == '200') {
						this.currentBuyStopLossNum = res.data.currentBuyStopLossNum;
						this.currentSellStopLossNum = res.data.currentSellStopLossNum;
						uni.hideLoading();
						uni.showToast({title:this.showConfirmToastText,icon:'none',duration: 1000})
			        } else {
						uni.hideLoading();
			            uni.showToast({
			                icon: "none",
			                title: res.message,
			            });
			        }
			    })
			},
			onCancelClick(){
				uni.showToast({title:'已取消',icon:'none',duration: 1000})
			},
			onConfirmClick(){
				uni.showLoading({
				    	title:"解除中..."
				})
				if(this.nowTitle == "多单警报"){
					this.setStopLossNum(0,"buy");
				}else if(this.nowTitle == "空单警报"){
					this.setStopLossNum(0,"sell");
				}
			}
        }
    }
</script>

<style>
    .topedit {
        display: flex;
        padding: 10px 0 0 0;
        margin: 5px 10px 0;
        justify-content: space-between;
        align-items: center;
    }

    .topedit .twosearch {
        width: 400px;
        height: 32px;
        background: #F6F7F9;
        border-radius: 25px;
        display: flex;
        align-items: center;
    }

    .topedit .twosearch text {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: #333333;
        margin: 0 10px 0 10px;
    }

    .topedit .twosearch image {
        width: 16px;
        height: 16px;
        margin: 0 10px 0 0;
    }

    .topedit .twosearch input {
        width: 150px;
        font-size: 14px;
    }

    .showyue {
        display: flex;
        justify-content: space-between;
        margin: 0 10px;
    }

    .showyue .lyd {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #666666;
    }

    .showyue .lnum {
        font-family: Aileron;
        font-weight: bold;
		font-size: 20px;
    }

    .tavfal {
        display: flex;
        justify-content: space-around;
        height: 90rpx;
        align-items: center;
    }

    .tabdata {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 40rpx;
        color: #0F0F0F;
        font-weight: bold;
        padding: 3px 0;
    }

    .addcla {
        color: #7F6AC3;
        border-bottom: 1px solid #7F6AC3;
    }

    .tlsection .tlrow {
        display: flex;
        border-bottom: 1px solid #EBEBEB;
        padding: 20px 0 13px 0;
        align-items: center;
        justify-content: space-between;
        margin: 0 20px;
    }

    .tlsection navigator {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 750rpx;
    }

    .tlsection .secondmodl {
        display: flex;
        padding: 0 0 10px 0;
        align-items: center;
    }

    .tlsection .secondmodl image {
        width: 17px;
        height: 17px;
    }

    .tlsection .secondmodl .texa {
        font-size: 16px;
        font-family: Source Han Sans CN;
		font-weight: bold;
        color: #333333;
    }

    .tlsection .secondmodl .texb {
        font-size: 14px;
        font-family: Source Han Sans CN;
        color: #ADB0BB;
    }

    .chcl {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    }
    
    .chcl text {
        font-size: 12px;
        font-family: Source Han Sans CN;
        color: #838AA4;
    }

    .tlsection .fords .thirths {
        display: flex;
        padding: 0 0 9px 0;
    }

    .tlsection .thirths .thirleft {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: #7F6AC3;
        width: 58px;
        height: 20px;
        background: #D2E7FF;
        border-radius: 2px;
        text-align: center;
        margin: 0 3px 0 0;
    }

    .tlsection .thirths .thirright {
        display: flex;
        width: 52rpx;
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 9px;
        color: #838AA4;
        align-items: center;
        justify-content: center;
    }

    .tlsection .thirths .thirright text {
        font-size: 12px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 9px;
        color: #333333;
        margin: 0 3px 0 0;
    }
	
	.tlsection .colnum {
	    font-size: 12px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #838AA4;
		align-items: center;
		justify-content: center;
	}
	
	.tlsection .colnum text {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    color: #ADB0BB;
	}
	
	.tlsection .colnumWin {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tlsection .colnumWin text {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    color: #05BC97;
	}
	
	.tlsection .colnumLoss {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tlsection .colnumLoss text {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    color: #D63E5D;
	}

    .tlsection .fords .fourth {
		display: flex;
		flex-direction: row;
    	width: 78px;
    	height: 28px;
        border-radius: 4px;
        font-size: 15px;
    	font-family: Aileron;
    	font-weight: 500;
    	color: #FFFFFF;
    	justify-content: center;
    	align-items: center;
    }
	
	.lock {
	    width: 30px;
	    height: 30px;
	}
	
	.buy {
	    font-size: 15px;
	    font-weight: bold;
	    color: #008800;
	    background: #ffffff;
	    border-radius: 2px;
	}
	
	.sell {
	    font-size: 15px;
	    font-weight: bold;
	    color: #D63E5D;
	    background: #ffffff;
	    border-radius: 2px;
	}
</style>
